<template>
    <div>
        <div class="panel">
            <el-button type="primary" size="mini" @click="onAddClub">添加粉丝站</el-button>
        </div>
        <div>
            <el-table
                    :data="clubs.items"
            >
                <el-table-column

                        label="站子"
                        prop="club_id"
                >
                    <template slot-scope="club">
                        <admin-entity-info
                            type="club"
                            :id="club.row.club_id"
                            :name="club.row.name"
                        >

                        </admin-entity-info>
                    </template>
                </el-table-column>
                <el-table-column
                        label="联系电话"
                        prop="phone"
                />
                <el-table-column
                        label="管理员"
                        prop="user_name"
                >
                    <template slot-scope="club">
                        <admin-entity-info
                                v-if="club.row.uid.length > 0"
                            type="user"
                            :id="club.row.uid"
                            :name="club.row.user_name"
                        ></admin-entity-info>
                    </template>
                </el-table-column>
                <el-table-column
                        label="操作"
                        width="220px"
                >
                    <template slot-scope="club">
                        <el-button
                                type="text"
                                size="mini"
                                :disabled="club.row.uid.length === 0"
                                @click="onRemoveManage(club.row)">移除管理员</el-button>

                        <el-button type="text" size="mini" @click="onEdit(club.row)">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>


</template>

<script lang="ts">

    import {Vue,Component,Prop, Watch} from 'vue-property-decorator'
    import AdminEntityInfo from '../controls/AdminEntityInfo'
    import {Api} from '@/api/stars'

    @Component({
        name:"AdminStarClubsView",
        components:{
            AdminEntityInfo
        }
    })
    export default class AdminStarClubsView extends Vue {

        @Prop({
            type:String
        })
        value: string;

        clubs: Api.Stars.GetStarClubsResponse = {
            items: []
        };

        @Watch('value')
        onValueChange(oldValue,newValue) {
            this.loadView();
        }

        mounted() {
            this.loadView()
        }

        loadView() {
            Api.Stars.GetStarClubs({star_id: this.value})
                .then((ack) => {
                    this.clubs = ack
                })
        }

        onAddClub() {
            this.$router.push({
                path:`/stars/club/editor/new?star=${this.$route.params['id']}`
            })
        }

        onEdit(club:any) {
            this.$router.push({
                path:`/stars/club/editor/${club.club_id}`
            })
        }

        onRemoveManage(row:any) {

            this.$confirm('移除管理员后，用户将失去粉丝站管理权，是否移除?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {

                Api.Stars.RemoveClubManage({club_id: row.club_id})
                    .then((ack) => {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });

                        this.loadView()
                    })

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        }
    }
</script>

<style scoped>
    .panel {
        padding: 5px 5px 0px 5px;
        float: right;
    }
</style>